import { Card, Tabs, Empty  } from 'antd'
import {Link } from 'umi'
import React, {useEffect, useState} from 'react'
import { getUpcomingNotice} from '../service'
import { routeJump} from '../Message/service'
import moment from 'moment'
import './MessagePortal.less'

const { TabPane } = Tabs;

const tabList = [
  { title: '全部', key: 0 },
  { title: '待入职', key: 1 },
  { title: '待录用', key: 6 },
  // { title: '待转正', key: 3 },
  // { title: '待签合同', key: 4 },
]

const operations = <Link to="/workplace/message">查看更多...</Link>;

const MessagePortal = ({ loading }) => {

  const [messageList, setMessageList] = useState([]);

  useEffect(() => {
    getUpcomingNotice(0).then(res =>{
      setMessageList(res ? res.list : []);
    })
  }, []);

  const tabOnChange = (key) => {
    getUpcomingNotice(parseInt(key)).then(res =>{
      setMessageList(res ? res.list : []);
    })
  };

  return (
    <Card
      loading={loading}
      bordered={false}
      bodyStyle={{
        padding: 0,
      }}
      style={{height: '100%'}}
    >
      <div className="message-portal">
        <Tabs animated={false}
          tabBarExtraContent={operations}
          size="large"
          onChange={(activeKey) => tabOnChange(activeKey)}
          tabBarStyle={{
            marginBottom: 24,
          }}
        >
          {
            tabList.map((tab)=>{
              return       <TabPane tab={tab.title} key={tab.key}>
                <div className="message-portal__list">
                  {
                    messageList.length < 1 ?
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
                      messageList.map((item,index) => {
                        if(item.isDone === 0){
                          return <div className="message-portal__list-item" key={index}>
                            <div className="message-portal__list-item-title" onClick={() => routeJump(item)}>{item.title}</div>
                            <div className="message-portal__list-item-time">{item.todoDate != null?moment(item.todoDate).format('YYYY-MM-DD'):''}</div>
                          </div>
                        }
                    })
                  }
                </div>
              </TabPane>
            })
          }
        </Tabs>
      </div>
    </Card>
  )
}

export default MessagePortal
